<template>
  <section class="success-stories">
    <h2 class="section-title">就在你身边，他们相爱啦！</h2>
    <p class="section-subtitle">Right Beside You, They Love Each Other!</p>
    <div class="download-btn btn-glow" @click="downloadFloveApp()">立即下载</div>
    <div class="stories-icon">
      <img src="https://images.health.ufutx.com/202506/18/1a837037ce7fb8502a211a01e19fbf55.png" alt="" />
    </div>
    <!--    <div class="stories-grid">-->
    <!--      <div class="story-item" v-for="(item, i) in stories" :key="i">-->
    <!--        <img :src="item.img" alt="成功故事" class="story-img" />-->
    <!--      </div>-->
    <!--    </div>-->
  </section>
</template>

<script setup lang="ts">
// // 18 import { ElButton } from 'element-plus'

// const stories = [
//   { img: '@/assets/story-1.jpg' },
//   { img: '@/assets/story-2.jpg' },
//   { img: '@/assets/story-3.jpg' },
//   { img: '@/assets/story-4.jpg' },
//   { img: '@/assets/story-5.jpg' },
//   { img: '@/assets/story-6.jpg' }
// ]
import { downloadFloveApp } from '@/utils/tools.ts'
</script>

<style scoped lang="less">
@import '@/styles/global.less';

.success-stories {
  padding: 100px 192px;
  text-align: center;

  .section-title {
    font-size: 50px;
    font-weight: bold;
    color: @text-color;
    margin-bottom: 17px;
  }

  .section-subtitle {
    font-size: 60px;
    color: #b5b5b5;
    margin-bottom: 17px;
  }

  .download-btn {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 100px;
    background: var(--Style, #1060ff);
    color: var(--ffffff, #fff);
    font-size: 18px;
    //font-weight: 500;
    margin-bottom: 50px;
  }

  .stories-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;

    .story-item {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);

      .story-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  @media (max-width: @tablet-breakpoint) {
    .stories-grid {
      gap: 10px;

      .story-item {
        width: 120px;
        height: 120px;
      }
    }
  }
}
</style>
